﻿

<link href="~/layui_ext/dtree/dtree.css" rel="stylesheet" />
<link href="~/layui_ext/dtree/font/dtreefont.css" rel="stylesheet" />


<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">权限菜单</div>
                <div class="layui-card-body">
                    <ul id="demoTree" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body">

                    <table class="layui-hide" id="test-table-cellEdit" lay-filter="test-table-cellEdit"></table>

                    <script type="text/html" id="test-table-totalRow-toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn " lay-event="getCheckData">添加</button>
                            <button class="layui-btn layui-btn-normal" lay-event="getCheckLength">修改</button>
                            <button class="layui-btn layui-btn-warm" lay-event="isAll">删除</button>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="~/layui/layui.all.js"></script>
<script>
    layui.extend({ //设定模块别名
        dtree: '{/}/layui_ext/dtree/dtree' //如果 dtree.js 是在根目录，也可以不用设定别名
    }).use(['dtree', 'table'], function () {
        var element = layui.element;
        var table = layui.table;
        var dtree = layui.dtree
            , layer = layui.layer
            , util = layui.util
        debugger;
        table.render({
            elem: '#test-table-cellEdit'
            , toolbar: '#test-table-totalRow-toolbarDemo'
            , url: '/Home/tableData1'
            , page: true //开启分页
            , height: 512
            , cols: [[
                { type: 'checkbox' }
                , { field: 'id', title: 'ID', width: 80, sort: true }
                , { field: 'username', title: '用户名', width: 120, sort: true, edit: 'text' }
                , { field: 'email', title: '邮箱', edit: 'text', minWidth: 150 }
                , { field: 'sex', title: '性别', width: 80, edit: 'text' }
                , { field: 'city', title: '城市', edit: 'text', minWidth: 100 }
                , { field: 'experience', title: '积分', sort: true, edit: 'text' }
            ]]
        })

        //监听单元格编辑
        table.on('edit(test-table-cellEdit)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value, {
                offset: '15px'
            });
        });


        //模拟数据1
        var data1 = [{
            "id": "001",
            "title": "湖南省",
            "last": false,
            "level": "1",
            "parentId": "0",
            "children": [{
                "id": "001001",
                "title": "长沙市",
                "last": true,
                "parentId": "001",
                "level": "2"
            }, {
                "id": "001002",
                "title": "株洲市",
                "last": true,
                "parentId": "001",
                "level": "2"
            }, {
                "id": "001003",
                "title": "湘潭市",
                "last": true,
                "parentId": "001",
                "level": "2"
            }, {
                "id": "001004",
                "title": "衡阳市",
                "last": true,
                "parentId": "001",
                "level": "2"
            }, {
                "id": "001005",
                "title": "郴州市",
                "last": true,
                "parentId": "001",
                "level": "2"
            }]
        }]


        dtree.render({
            elem: "#demoTree",
            data: data1
        });
        dtree.on("node('demoTree')", function (obj) {
            debugger;
            layer.alert(JSON.stringify(obj.param));

           // layer.alert('你好，体验者');

            console.log(obj.param); // 点击当前节点传递的参数
            console.log(obj.dom); // 当前节点的jquery对象
            console.log(obj.childParams); // 当前节点的所有子节点参数
            console.log(obj.parentParam); // 当前节点的父节点参数
        });









    });
</script>